<html>
<html>
<head>
<meta name='apple-mobile-web-app-capable' content='yes' />
<title>Insert title here</title>
<script type="text/javascript" src="js/SolarSystem.js"></script>
<script type="text/javascript" src="js/PlanetElement.js"></script>
<script type="text/javascript" src="js/StarsView.js"></script>
<script type="text/javascript" src="js/PlanetaryPositions.js"></script>
<script type="text/javascript" src="js/NumberUtils.js"></script>
<script type="text/javascript" src="js/PlanetsAnimation.js"></script>
<script type="text/javascript" src="js/DateAndTimeDropDowns.js"></script>
<script type="text/javascript" src="js/CityCoordsMenu.js"></script>
<script type="text/javascript" src="js/PlanetBirthday.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/Tween.js"></script>
<script type="text/javascript" src="js/Stats.js"></script>
<script type="application/x-javascript">
	
</script>
<link rel="stylesheet" type="text/css" href="css/simpleOrrery.css" />
<link href='http://fonts.googleapis.com/css?family=Nova+Mono' rel='stylesheet' type='text/css'>
 
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="js/pngfix.js"></script>
<![endif]-->
<script type="text/javascript">
	function init(){
		TWEEN.start();
		var datdd = new DateAndTimeDropDowns(document.getElementById("formContainer"), "form0");
		CityCoordsMenu.populate(document.getElementById("form0"), "cities");
		new NumberUtils();
		new CityCoordsMenu();
		var pp = new PlanetaryPositions();
		new PlanetBirthday();
		var ssv = new SolarSystem();
		ssv.makeElements(document.getElementById("sky"))
		ssv.setOnLoadComplete(update);
		var p = new PlanetsAnimation()
		p.pole = PlanetsAnimation.SOUTH;
		p.init();
		var date = new Date();
		var sv = new StarsView()
		document.getElementById("sky").appendChild(sv.createStars());
		sv.positionStars(date)
		var dateObj = {};
		dateObj.time = date.getTime();
		var coordsObj = {}
		dateObj.latitude = PlanetaryPositions.latitude;
		dateObj.longitude = PlanetaryPositions.longitude;

		var cityChanged = false;

		//p.azimuthAltitude(date);
		//ssv.positionElements();
		
		function doTween() {
			new TWEEN.Tween(dateObj)
			.to({time : dateObj.time + (86400000)}, 6000)
			.easing(TWEEN.Easing.Cubic.EaseInOut)
			.onUpdate(update)
			.onComplete(tweenComplete)
			.start();

		}

		document.getElementById('solar_system').onclick = solarSystemClick;
		function solarSystemClick(event){
			var planetId = event.target.parentNode.id
			switch (planetId){
				case "sun" :
					tweenToNewDate(new Date().getTime());
					dateObj.time = date.getTime();
				break;
				case "bg" :
				
				break;
				default :
					doTween()
				break;
			}
			
		}
		
		
		//////////////////////////////
		/*
		 * 
		 * added by tom, plant rollovers
		 *
		*/
		//create rollover graphic
		var rollOverBox = createRollOverBox();
		
		function createRollOverBox(){
			var newdiv = document.createElement('div');
			document.getElementById('sky').appendChild(newdiv);
			newdiv.style.position = 'relative';
			newdiv.setAttribute('id', 'rolloverbox');
			newdiv.style.backgroundColor = '#454545';
			newdiv.style.visibility = 'hidden';
			newdiv.style.zIndex = 10000;
			newdiv.style.fontFamily = 'Nova Mono, cursiv';
			newdiv.style.color='white';
			newdiv.style.textAlign = 'left';
			newdiv.style.padding = '10px';
			newdiv.style.width = '100px';
			return newdiv;
		}
		
		//rollover listener	
		document.getElementById('solar_system').onmouseover = solarBodyOver;
		document.getElementById('stars').onmouseover = solarBodyOver;
		//show rollover box
		function solarBodyOver(event){
			
			var objectId = event.target.parentNode.id;
			if(objectId != 'solar_system' && objectId != 'rolloverbox' && objectId != 'stars'){
				var plantetDiv = event.target.parentNode;
				rollOverBox.style.top = parseInt(plantetDiv.style.top) - 10 + 'px';
				rollOverBox.style.left = parseInt(plantetDiv.style.left) + 25 + 'px';
				rollOverBox.innerHTML = objectId;
				rollOverBox.style.visibility = 'visible';
			}
		}
		
		//hide rollover box
		document.getElementById('solar_system').onmouseout = solarBodyOut;
		document.getElementById('stars').onmouseout = solarBodyOut;	
		function solarBodyOut(event){
			var objectId = event.target.parentNode.id;
			if(objectId != 'solar_system' && objectId != 'rolloverbox' && objectId != 'stars'){
				rollOverBox.style.visibility = 'hidden';
			}
		}
		////////////////////////////
		
		
		
		document.getElementById('cities').onchange = function(){
			cityChanged = true;
			tweenToFormDate();
		}
		document.getElementById('goDate').onclick = tweenToFormDate;
		function tweenToFormDate() {

			var form = document.getElementById('form0');
			var coords = CityCoordsMenu.coords(form.cities.value)
			if(cityChanged){
				var newTime = new Date().getTime();
				datdd.resetDateAndTime(new Date())
				cityChanged = false;
			} else {
				var newTime = new Date(form.year.value, form.month.value,form.day.value, form.hours.value, form.minutes.value).getTime();
			}
			if(newTime == dateObj.time) {
				newTime += new Date().getSeconds();
				console.log("same time - ")
			}
			tweenToNewDate(newTime, coords[0], coords[1]);
		}
		function tweenToNewDate(newTime, pLatitude, pLongitude) {
			TWEEN.removeAll();
			if(pLatitude != null && pLongitude != null){
				new TWEEN.Tween(dateObj).to({ time : newTime, latitude : pLatitude, longitude: pLongitude}, 6000).easing(TWEEN.Easing.Cubic.EaseInOut).onComplete(tweenComplete).onUpdate(update).start();
			} else {
				new TWEEN.Tween(dateObj).to({ time : newTime}, 6000).easing(TWEEN.Easing.Cubic.EaseInOut).onComplete(tweenComplete).onUpdate(update).start();
			}

		}
		function tweenStart() {

		}
		function tweenComplete() {
			console.log("Tween completed")
		}
		function update() {
			PlanetaryPositions.latitude = dateObj.latitude;//coords[0];
			PlanetaryPositions.longitude = dateObj.longitude;//coords[1];
			var newT = dateObj.time;
			p.azimuthAltitude(new Date(newT), SolarSystem.elements);
			SolarSystem.starElements = sv.positionStars(new Date(newT))
			ssv.positionElements();
			sv.positionStars(new Date(newT))
		};
		// var stats = new Stats();

		// // Align top-left
		// stats.getDomElement().style.position = 'absolute';
		// stats.getDomElement().style.left = '0px';
		// stats.getDomElement().style.top = '0px';

		// document.body.appendChild( stats.getDomElement() );

		// setInterval( function () {

		//     stats.update();

		// }, 1000 / 60 );
	};
	</script>
</head>
<body onLoad="init()">

</script>

<div id="container">
	<div id="header">
		<div id="formContainer">

		</div>

		<div id="dateOut"></div>
	</div>
	<div id="sky">
	</div>
</div>
<div id="clearfloat"></div>

</body>
</html>